<template>
  <div class="narry-list">
    <van-nav-bar
      title="优质推荐"
      left-text="返回"
      left-arrow
      @click-left="$router.push('/home')"
    />
    <img
      src="https://static.daojia.com/jz/common/common-resource/cdnHtml/baomu/bm-channel/index/res/banner.png?v=202009032826"
      alt=""
    />
    <van-card
      :desc="`金牌${item.nanny_name}`"
      :title="`金牌${item.post}`"
      :thumb="item.narry_phone"
      v-for="item in narryList"
      :key="item.id"
      class="narry_card"
    >
      <template #tags>
        <van-tag plain type="danger">{{ item.nanny_age }}岁</van-tag>
        <van-tag plain type="danger">{{ item.nanny_native }}</van-tag>
        <van-tag plain type="danger">{{ item.nanny_experience }}</van-tag>
      </template>
      <template #footer>
        <van-button
          size="mini"
          plain
          type="warning"
          :narry_id="item.id"
          @click="toRec(item.id)"
          >咨询价格</van-button
        >
      </template>
    </van-card>
    <!-- <div class="narry-person" v-for="item in narryList" :key="item.id">
      <div class="narry_left">
        <img class="narry_" :src="item.narry_phone" alt="" />
      </div>
      <div class="narry_right"></div>
    </div> -->
  </div>
</template>

<script>
import { getNarrysInfo } from "@/api/home";
export default {
  data() {
    return {
      narryList: [],
    };
  },
  created() {
    this.getNarryList();
  },
  methods: {
    async getNarryList() {
      const res = await getNarrysInfo();
      this.narryList.push(...res);
      console.log(this.narryList);
    },
    toRec(id) {
      this.$router.push("/narry-rec/" + id);
    },
  },
};
</script>
<style lang='less' scoped>
.narry-list {
  img {
    width: 100%;
  }
}
.narry-person {
  display: flex;
  width: 100%;
  height: 130px;
  .narry_left {
    flex: 1;
    height: 100%;
    img {
      width: 120px;
      height: 120px;
    }
  }
  .narry_right {
    flex: 4;
    height: 100%;
  }
}
.narry_card {
  .narry-list {
    margin-bottom: 8px;
  }
  .van-card__desc {
    margin-bottom: 8px;
  }
  .van-tag {
    margin-right: 3px;
  }
}
</style>